<!-- 发布朋友圈 -->
<template>
	<view class="content">
		<!-- <u-navbar   :is-back="false"  :titleBold="true" title="发现"  :background="{ background: '#f8f8f8'  }" title-color="#404133" :border-bottom="false" z-index="1001">
		</u-navbar> -->
		<u-navbar :placeholder='true' title="发表文字" :autoBack="true" :isBack='true'>
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="19"></u-icon>
				
			</view>
			<!-- <view class="u-nav-slot" slot="right"><u-button size="mini" type="success" @click="handleRelease">发表</u-button></view> -->
		</u-navbar>

		<textarea
			class="input"
			v-model="content"
			placeholder-style="font-size: 15px;color:black"
			placeholder="这一刻的想法..."
			:show-confirm-bar="false"
			:adjust-position="false"
			:disable-default-padding="true"
		></textarea>
		<!-- <u-upload
			class="upload"
			ref="upload"
			:action="action"
			:auto-upload="true"
			:max-size="maxSize"
			:max-count="9"
			:size-type="['compressed']"
			@on-oversize="oversizeUpload"
			@on-success="successUpload"
			v-if="type == 'text'"
		></u-upload> -->
		<u-upload v-if="type == 'text'" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
		<view v-if="type == 'text'" class="" style="color: #999;">*图片仅支持png、jpg格式</view>
		<video v-if="type == 'video'" id="myVideo" :src="srcVideo" controls></video>
		<view v-if="type == 'video'" class="" style="color: #999;">*视频仅支持mp4格式</view>
		<view class="tips">
			<u-cell-group :border="false">
				<u-cell size="large" icon="account" title="谁可以看" isLink @click="selectClass"></u-cell>
				<view class="select" v-if="classList.length > 0">
					<text v-for="(it, i) in classList" :key="i">{{ it.className }}、</text>
				</view>
			</u-cell-group>
		</view>
		<button @click="handleRelease" class="btn">发表</button>
	</view>
</template>

<script>
import { saveCircleFriend } from '@/api/classCircle.js';
export default {
	data() {
		return {
			content: '',

			action: this.$config.URL + 'api/app/sysFile/v1/save',
			maxSize: 2 * 1024 * 1024, //限制文件大小 2M
			btnLoading: false, //防止重复点击
			classList: [], //可看班级
			type: '',
			parentList: [], //传递参数
			fileList1: [],
			srcVideo:'',
		};
	},
	onLoad(options) {
		// 传递的参数
		console.log('传递的参数', options.url);
		if (options.url) {
			this.srcVideo = options.url;
		}
		this.type = options.type;
	},
	onShow() {
		// 关于选择班级
		this.classList = [];
		let newClass = uni.getStorageSync('selectClass');

		if (newClass.length) {
			newClass.forEach(it => {
				if (it) {
					this.classList.push(it);
					if (it.studentAndParentTree.length) {
						it.studentAndParentTree.forEach(its => {
							if (its.parentsTree.length) {
								its.parentsTree.forEach(itss => {
									this.parentList.push(itss.parentId);
								});
							}
						});
					}
				}
			});

			let list = [];
			newClass.forEach(it => {
				list.push(it.classId);
			});
			console.log('parentList', this.parentList);
			uni.setStorageSync('selectClassIndex', list);
		} else {
			uni.getStorageSync('classTree');

			uni.setStorageSync('selectClassIndex', []);
		}

		console.log('打印', uni.getStorageSync('selectClass'));
	},
	methods: {
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			console.log('this.fileList1',this.fileList1)
			console.log('lists',lists)
			lists.map(item => {
				console.log('item',item)
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			console.log('this[`fileList${event.name}`]',this[`fileList${event.name}`])
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.action, // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						resolve(JSON.parse(res.data).url)
						
					}
				});
			});
		},
		successUpload(res) {
			console.log('上传成功地址', res);
		},
		selectClass() {
			uni.navigateTo({
				url: '/pages/tabbar/find/selectClass/selectClass'
			});
		},
		oversizeUpload() {},

		//自定义标题栏按钮点击事件  微信小程序
		async handleRelease() {
			console.log('this.fileList1',this.fileList1)
			if (!this.parentList.length) {
				return this.$api.showTip('请选择可查看班级');
			}
			if (this.content.length || this.fileList1.length || this.srcVideo.length) {
				this.btnLoading = true;
				uni.showLoading({
					title: '正在发布...',
					mask: true
				});
				let params = {};
				if (this.type == 'text') {
					params = {
						circleImage: JSON.stringify(this.fileList1.map(it => it.url)),
						circleType: '0',
						content: this.content,
						userIds: this.parentList
					};
				} else {
					params = {
						circleVideo: JSON.stringify(this.srcVideo),
						circleType: '1',
						content: this.content,
						userIds: this.parentList
					};
				}
				const { data } = await saveCircleFriend(params);
				this.btnLoading = false;
				uni.hideLoading();
				uni.reLaunch({
					url: '../find',
					success: function(e) {
						
						var page = getCurrentPages()[0];
						if (page == undefined || page == null) return;
						page.onLoad();
					}
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.content {
	padding: 20rpx 40rpx;
	.input {
		caret-color: $uni-color-success;
		height: 160rpx;
	}
	.tips {
		margin-top: 120rpx;
	}
}
</style>
<style lang="scss">
.content {
	/deep/.u-upload__button {
		width: 300rpx !important;
		height: 300rpx !important;
		background-color: #9e9e9e21!important; 
	}
	
	/deep/.u-cell__body {
		background-color: #f8f8f8;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}
	.select {
		background-color: rgb(248, 248, 248);
		padding: 10px 16px;
		color: $uni-theme-color;
	}
	#myVideo {
		width: 300rpx;
		height: 300rpx;
	}
}
</style>
